<template>
    <div class="MatchBasicInfo">
      <div style="  display: flex; flex-direction: column;justify-content: space-around;">
       <div class="Item">
        <div class="InfoItem">
          <div class="NameFont">赛事名称：</div>
          <el-input v-model="MatchName" placeholder="xxx2018超级联赛" class="InputSize"></el-input>
        </div>
        <div  class="InfoItem">
          <div class="NameFont">裁判长：</div>
          <div>{{RefereeName}}</div>
        </div>
      </div>
       <div class="Item">
        <div class="InfoItem">
          <div class="NameFont">主办单位：</div>
          <el-input v-model="Organization" placeholder="xxx2018超级联赛" class="InputSize"></el-input>
        </div>
        <div class="InfoItem">
          <div class="NameFont">比赛地点：</div>
          <el-input v-model="MatchLocation" placeholder="武汉市洪山区珞喻路武汉体育学院" class="InputSize"></el-input>
        </div>
      </div>
        <div style="margin-bottom: 30px;">
        <el-card v-for="(SelfItem,index) in SelfDefined" :key="index" class=" SelfDefined" >
          <div style="display: flex;    justify-content: space-between;">
          <div class="InfoItem">
            <div class="NameFont">自定义组别：</div>
            <el-input v-model="SelfDefined[index].TeamName" placeholder="xxx2018超级联赛" class="InputSize"></el-input>
          </div>
          <div class="InfoItem">
            <div class="NameFont">年龄：</div>
              <div class="Age">
                <el-input maxlength="3" v-model="SelfDefined[index].AgeMin" placeholder="输入年龄下限" class="AgeInput"></el-input>
                <div style="width: 8.5%;border-bottom: 4px solid #409EFF;height: 19px;margin-left: 5%;margin-right: 5%;"></div>
                <el-input maxlength="3" v-model="SelfDefined[index].AgeMax" placeholder="输入年龄上限" class="AgeInput"></el-input>
              </div>
            <i class="iconfont icon-close_light addClose" @click="addClose(index)" v-show="step!=3"></i>
           </div>
          </div>
          <div style="display: flex;  align-items: center; height: 42px;">
            <div style="width: 9%;">项目类型：</div>
            <el-checkbox-group v-model="TypeCheck" style="display: flex;justify-content: space-between;width: 52%;">
              <el-checkbox v-for="(Type,index) in MatchType" :key="index" :label="Type" style="width: 10%;"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div style="display: flex;  align-items: center; height: 42px;">
            <div style="width: 9%">价格（元）：</div>
            <div style="display: flex;justify-content: space-between;width: 52%;">
            <el-input
              size="small"
              maxlength="4"
              v-model="PriceInput[PriceIndex]" class="PriceInput" v-for="(Price,PriceIndex) in PriceInput" :key="PriceIndex">
            </el-input>
            </div>
          </div>
        </el-card>
          <i  class="iconfont icon-add addMore" @click="addMore" v-show="step!=3"></i>
        </div>
       <div class="Item">
        <div class="InfoItem">
          <div class="NameFont">报名截止时间：</div>
          <div class="block">
            <el-date-picker
              v-model="EndTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
        <div class="InfoItem">
          <div class="NameFont">报名截止时间：</div>
          <div class="block">
            <el-date-picker
              v-model="StartTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </div>
        </div>
       </div>
      </div>
      <div class="Avoid">
        <div class="InfoItem">
          <div>是否考虑同单位回避：</div>
          <el-switch
            v-model="AvoidCheck"
            active-color="#409EFF">
          </el-switch>
        </div>
        <el-collapse-transition>
        <el-card class="box-card" v-show="AvoidCheck">
          <div class="ChooseUnit">
            <div style="width: 25%">一级单位：</div>
            <el-input v-model="OneUnit" ></el-input>
          </div>
          <div class="ChooseUnit">
            <div style="width: 25%">二级单位：</div>
            <el-input v-model="TwoUnit"></el-input>
          </div>
          <div class="ChooseUnit">
            <div style="width: 25%">三级单位：</div>
            <el-input v-model="ThreeUnit"></el-input>
          </div>
        </el-card>
        </el-collapse-transition>
      </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: "MatchBasicInfo",
      data(){
          return{
            RefereeName:'张三',
            MatchName:'',
            MatchLocation:'',
            Organization:'',
            SelfDefined:[
              {},
            ],
            MatchType:['男单','女单','男双','女双','混双','男团','女团','混团'],
            PriceInput:['','','','','','','',''],
            TypeCheck:['','','','','','','',''],
            EndTime:'',
            StartTime:'',
            AvoidCheck:false,
            OneUnit:'',
            TwoUnit:'',
            ThreeUnit:'',
          }
      },
      watch:{
          PriceInput:function (val) {
            console.log(this.PriceInput)
            console.log(val)
            console.log(this.TypeCheck)
          }
      },
      methods:{
        // ShowMatchImportant:function () {
        //   this.$store.commit('setAddMatchDetailStep',2)
        // }
        addMore(){
          this.SelfDefined.push({})
          console.log(this.SelfDefined)
        },
        addClose(index){
          this.SelfDefined.splice(index,1)
        }
      },
      computed:{
        ...mapState({
          step:'AddMatchDetailStep',
        })
      },
    }
</script>

<style scoped>
.MatchBasicInfo{
  width: 100%;
  height: 70%;
}
.Item{
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.InfoItem{
  display: flex;
  align-items: center;
  width: 45%;
  height: 42px;
}
.addClose{
  border-radius: 50%;
  font-size: 23px;
  margin-left: 50px;
  margin-bottom: 30px;
}
.addClose:hover{
  background: #D1D3D6;
  transform:rotate(90deg);
  transition: 1s;
}
.addMore{
  margin-right: 70px;
  width: 30px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  float: right;
  font-size: 20px;
  background: #D1D3D6;
  border-radius: 50%;
  color: #666;
}
.addMore:hover{
  transform:rotate(90deg);
  transition: 1s;
}
.addMore:active{
  background: #E8EAED;
}
.SelfDefined{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    height: 40%;
    width: 90%;
  margin-bottom: 10px;
}
.NameFont{
  width: 20%;
  line-height: 42px;
}
.InputSize{
  width: 65%;
  height: 42px;
}
.Age{
    width: 68%;
    display: flex;
}
.AgeInput{
  width: 35%;
  height: 42px;
  align-items: center;
  display: flex;
}
.PriceInput{
  height: 42px;
  width: 10%;
}
  .box-card{
    width: 50%;
  }
  .ChooseUnit{
    display: flex;
    height: 42px;
    align-items: center;
  }
</style>
